<!--
 * @Descripttion: 
 * @Author: jhw
 * @Date: 2023-07-17 14:50:21
 * @LastEditors: jhw
 * @LastEditTime: 2023-07-18 17:19:58
-->
<template>
  <div class="main">
    <div :class="{ active: currentModel, container: true, animate__animated: true, animate__flipInX: true }">
      <!-- 注册 -->
      <div class="form-container sign-up-container">
        <el-form
          v-if="!isForget"
          ref="regFormRef"
          class="form"
          :model="regForm"
          onsubmit="return false;"
          :rules="registerRules"
        >
          <h3 class="container-title">Register</h3>
          <el-form-item class="form-item" prop="username">
            <el-input v-model="regForm.username" type="text" placeholder="昵称" />
          </el-form-item>
          <el-form-item class="form-item" prop="email">
            <el-input v-model="regForm.email" placeholder="邮箱">
              <template v-if="regForm.email" #append>
                <el-button type="primary" size="small" round @click="sendEmail(regForm.email, 'regist')">{{
                  sendEmailInfo.btnText
                }}</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="form-item" prop="password">
            <el-input v-model="regForm.password" type="password" name="password" placeholder="密码" />
          </el-form-item>
          <el-form-item class="form-item" prop="verificationCode">
            <el-input v-model="regForm.verificationCode" type="text" name="password" placeholder="验证码" />
          </el-form-item>
          <button type="button" class="signUp theme-button">注 册</button>
        </el-form>

        <!-- 找回密码-->
        <el-form
          v-if="isForget"
          ref="forgetFormRef"
          class="form"
          :model="forgetForm"
          onsubmit="return false;"
          :rules="forgetRules"
        >
          <h3 class="container-title">Forget</h3>
          <el-form-item class="form-item" prop="email">
            <el-input v-model="forgetForm.email" placeholder="邮箱" class="input-with-select">
              <template v-if="forgetForm.email" #append>
                <el-button type="primary" size="small" round @click="sendEmail(forgetForm.email, 'modify')">{{
                  sendEmailInfo.btnText
                }}</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="form-item" prop="password">
            <el-input v-model="forgetForm.password" type="password" name="password" placeholder="密码" />
          </el-form-item>
          <el-form-item class="form-item" prop="verificationCode">
            <el-input v-model="forgetForm.verificationCode" type="text" name="password" placeholder="验证码" />
          </el-form-item>
          <button type="button" class="signUp theme-button">modify</button>
        </el-form>
      </div>
      <!-- 登入 -->
      <div class="form-container sign-in-container">
        <el-form ref="loginFormRef" class="form" :model="loginForm" onsubmit="return false;" :rules="loginRules">
          <h2 class="container-title">Login</h2>

          <el-form-item class="form-item" prop="username">
            <el-input v-model="loginForm.username" type="text" placeholder="昵称" />
          </el-form-item>
          <el-form-item class="form-item" prop="passwoed">
            <el-input v-model="loginForm.password" type="password" name="password" placeholder="密码" />
          </el-form-item>
          <button class="signUp theme-button" type="button" @click="login(loginFormRef)">sign in</button>
          <!-- <button class="signUp theme-button" type="button">登 录</button> -->
          <p
            class="forget"
            @click="
              currentModel = !currentModel;
              isForget = true;
            "
          >
            --- Forget Passwoed----
          </p>
        </el-form>
      </div>
      <!--覆盖容器-->
      <div class="overlay_container">
        <div class="overlay">
          <!--左边 -->
          <div class="overlay_panel overlay_left_container">
            <h2 class="container-title">Welcome back!</h2>
            <p>请输入您的个人信息登录，以保持与我们的联系</p>
            <button id="sign-in" type="button" class="theme-button" @click="currentModel = !currentModel">登入</button>
          </div>
          <!-- 右边 -->
          <div class="overlay_panel overlay_right_container">
            <h2 class="container-title">hello friend!</h2>
            <p>输入您的个人信息，与我们一起开始旅程</p>
            <button
              id="sign-up"
              type="button"
              class="theme-button"
              @click="
                currentModel = !currentModel;
                isForget = false;
              "
            >
              注册
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { forgetReq, loginReq, registReq, sendEmailInfo, sendEmailType } from '@/types/login/login';
import { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRules } from '@/logic/login/index.ts';
import { useRouter } from 'vue-router';

const { loginRules, registerRules, forgetRules } = useRules();

const router = useRouter();

const currentModel = ref(false); //当前模块 true 注册 false 登入
const isShowSendEmail = ref(false);
const loginFormRef = ref<FormInstance>();
const isForget = ref(false);

const loginForm = reactive<loginReq>({
  username: '',
  password: '',
});

const regFormRef = ref<FormInstance>();
const regForm = reactive<registReq>({
  email: '',
  username: '',
  password: '',
  verificationCode: '',
});

const forgetFormRef = ref<FormInstance>();
const forgetForm = reactive<forgetReq>({
  email: '',
  password: '',
  verificationCode: '',
});

let sendEmailInfo = reactive<sendEmailInfo>({
  btnText: 'send',
  isPleaseClick: true,
});

const sendEmail = async (email: string, emailType: sendEmailType) => {};

const login = () => {
  router.replace('/dashboard');
};
</script>

<style lang="scss" scoped>
@import '@/styles/login/login';

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #f6f5f7;
  background-size: cover;
  background-image: url('@/assets/icons/background.svg');
}
</style>
